<template>
  <div class="small-popup chart-border" :style="{ left: left + 'px', top: top + 'px' }">
    <div class="info-box">
      提示信息
      <p>name：{{ displayData.name }}</p>
    </div>
  </div>
</template>

<script setup>
defineProps({
  displayData: {
    type: Object,
    default: () => {}
  },
  left: {
    type: Number,
    default: 0
  },
  top: {
    type: Number,
    default: 0
  }
});
</script>

<style lang="scss" scoped>
.small-popup {
  width: 200px;
  height: 100px;
  background-color: #02161d;
  position: absolute;
  opacity: 0.7;
  .info-box {
    font-size: 16px;
    color: #fff;
  }
}
.chart-border {
  &::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: -2px;
    border-top: 2px solid #67fdfc;
    border-bottom: 2px solid #67fdfc;
    z-index: 1;
  }
  &::after {
    content: "";
    display: block;
    width: calc(100% - 40px);
    height: 100%;
    position: absolute;
    top: -2px;
    left: 20px;
    border-top: 2px solid #16444a;
    border-bottom: 2px solid #16444a;
    z-index: 2;
  }
}
</style>
